<template>
  <div class="total-class">
    <div>
      <span class="demonstration">CCNU Online Judge </span>
    </div>
    <el-table
      :data="matches"
      style="width: 50%;margin-left: 25%;margin-top: 5vh"
      :default-sort = "{prop: 'date', order: 'descending'}"
    >
      <el-table-column
        prop="id"
        label="编号"
        sortable
        width="90">
      </el-table-column>
      <el-table-column
        prop="match_name"
        label="比赛"
        sortable
        width="180">
        <template slot-scope="scope">
          <span style="color:#0078D7;" @click="toMatch(scope.row)">{{ scope.row.match_name }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="start"
        label="开始时间"
        sortable
        width="250">
      </el-table-column>
      <el-table-column
        prop="end"
        label="结束时间"
        sortable
        width="auto">
      </el-table-column>
      <!--<el-table-column-->
        <!--prop="end"-->
        <!--label="结束时间"-->
        <!--:formatter="formatter">-->
      <!--</el-table-column>-->
    </el-table>
  </div>
</template>

<script>
  import Api from '../common/api';
    export default {
        name: "match-page",
        data(){
          return{
            matches:[],
            tableData: [{
              id: '1',
              match: 'CCNU 2022新生赛',
              start: '2022-02-22 12:00:00',
              end: '2022-02-29 12:00:00'
            }]
          }
        },
        beforeRouteEnter(to, from, next) {
          next(vm => {
            // console.log(vm);//当前组件的实例
            Api.apiCall('GET','/get_matches').then(resolve=>{
              if (resolve.data.code === 200){
                vm.matches = resolve.data.data;
              }
              setTimeout(()=>{
                this.$router.push('/login')
              },3000);
            });
          });
        },
        methods:{
          toMatch(val){
            this.$router.push('/index/questionBank')
          },
          formatter(row, column) {
            return row.address;
          }
        }
    }
</script>

<style scoped>
  .total-class{
    margin-top: 5vh;
    font-size: 3vw;
  }
</style>
